<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-form :inline="true" :model="logForm" class="demo-form-inline" size="small">
                    <el-form-item :label="$t('OperUser')">
                        <el-input style="width:120px" v-model="logForm.operUser"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('StartTime')">
                        <el-date-picker style="width:190px" v-model="logForm.startTime" type="datetime"></el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('EndTime')">
                        <el-date-picker style="width:190px" v-model="logForm.endTime" type="datetime"></el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('LogType')">
                        <el-select style="width:120px" v-model="logForm.logType">
                            <el-option :label="$t('All')" value="-1"></el-option>
                            <el-option :label="$t('System')" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getLogData">{{$t('Search')}}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="batchDeleteLog">{{$t('BatchDel')}}</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="table.data" align="center" @selection-change="selsChange" stripe border
                      style="width:100%">
                <el-table-column type="selection" width="65"></el-table-column>
                <el-table-column type="index" width="65" label="#"></el-table-column>
                <el-table-column prop="operTimeStamp" :label="$t('OperTime')"></el-table-column>
                <el-table-column prop="operKey" :label="$t('LogType')">
                    <template slot-scope="scope">
                        <span v-if="scope.row.operKey==1" v-text="$t('System')"></span>
                    </template>
                </el-table-column>
                <el-table-column prop="operDesc" :label="$t('OperDesc')"></el-table-column>
                <el-table-column prop="operUserName" :label="$t('OperUser')"></el-table-column>
                <el-table-column prop="operResult" :label="$t('OperResult')">
                    <template slot-scope="scope">
                        <el-tag type="success" v-text="$t('success')" v-if="scope.row.operResult == 'true'"></el-tag>
                        <el-tag type="danger" v-text="$t('failed')" v-if="scope.row.operResult == 'false'"></el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('Operation')">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="deleteLog(scope.row.logId)">{{$t('Delete')}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="table.currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="table.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="table.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value1: '',
                table: {
                    data: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                logForm:{
                    operUser:"",
                    startTime:"",
                    endTime:"",
                    logType:""
                },
                selectedLog:[]
            }
        },
        methods:{
            getLogData(){
                let vm = this;
                vm.$http.get('sys/queryLogs',{
                            params: {
                                username: vm.logForm.operUser,
                                startTime: Date.parse(vm.logForm.startTime),
                                endTime:  Date.parse(vm.logForm.endTime),
                                logType: vm.logForm.logType,
                                currentPage: vm.table.currentPage,
                                pageSize: vm.table.pageSize,
                            }
                        }
                    )
                    .then(function (response) {
                        vm.table.data = response.data.data;
                        vm.table.total = response.data.total;
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            deleteLog(logId){
                let vm = this;
                let logIds = [];
                logIds.push(logId);
                vm.$confirm(vm.$t('IsDelete'), vm.$t('Tip'), {
                    confirmButtonText: vm.$t('Confirm'),
                    cancelButtonText: vm.$t('Cancel'),
                    type: 'warning'
                }).then(() => {
                    vm.$http.get('sys/deleteLogByID',{
                            params: {
                                logId: JSON.stringify(logIds)
                            }
                        }
                    )
                        .then(function (response) {
                            if (response.data.result) {
                                vm.$message({
                                    message: vm.$t('Success'),
                                    type: 'success'
                                })
                                vm.getLogData();
                            } else {
                                vm.$message.error(vm.$t('Failed'));
                            }

                        })
                        .catch(function (error) {
                            console.log(error)
                        })
                }).catch(() => {

                });

            },
            batchDeleteLog(){
                let vm = this;
                if(vm.selectedLog.length>0){
                    vm.$confirm(vm.$t('IsDelete'), vm.$t('Tip'), {
                        confirmButtonText: vm.$t('Confirm'),
                        cancelButtonText: vm.$t('Cancel'),
                        type: 'warning'
                    }).then(() => {
                        vm.$http.get('sys/deleteLogByID',{
                                params: {
                                    logId: JSON.stringify(vm.selectedLog)
                                }
                            }
                        )
                            .then(function (response) {
                                if (response.data.result) {
                                    vm.$message({
                                        message: vm.$t('Success'),
                                        type: 'success'
                                    })
                                    vm.getLogData();
                                } else {
                                    vm.$message.error(vm.$t('Failed'));
                                }

                            })
                            .catch(function (error) {
                                console.log(error)
                            })
                    }).catch(() => {

                    });
                }else{
                    vm.$message({
                        message: vm.$t('PleaseSeclect'),
                        type: 'warning'
                    })
                }



            },
            handleSizeChange(val) {
                let vm = this
                vm.table.pageSize = val
                vm.getLogData()
            },
            handleCurrentChange(val) {
                let vm = this
                vm.table.currentPage = val
                vm.getLogData()

            },selsChange(sels) {
                //被选中的行组成数组
                let tmpSel = [];
                for (let index in sels) {
                    tmpSel.push(sels[index].logId);
                }
                this.selectedLog = tmpSel;
            },
        },
        components: {},

        created: function () {
            let vm = this
            vm.getLogData()
        }
    }
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
</style>
